<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Construct and style polylines." />
    <meta name="quarkgis-sandcastle-labels" content="Development" />
    <title>QuarkGIS Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/QuarkGISUnminified/QuarkGIS.js"
      nomodule
    ></script>
    <script type="module" src="../load-quarkgis-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="quarkgisContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="quarkgis_sandcastle_script">
      function startup(QuarkGIS) {
        "use strict";
        //Sandcastle_Begin
        function createPrimitives(scene) {
          var polylines = scene.primitives.add(new QuarkGIS.PolylineCollection());

          // A simple polyline with two points.
          var polyline = polylines.add({
            positions: QuarkGIS.PolylinePipeline.generateCartesianArc({
              positions: QuarkGIS.Cartesian3.fromDegreesArray([
                -120.0,
                40.0,
                -110.0,
                30.0,
              ]),
            }),
            material: QuarkGIS.Material.fromType("Color", {
              color: new QuarkGIS.Color(1.0, 1.0, 1.0, 1.0),
            }),
          });
          Sandcastle.declare(polyline); // For highlighting on mouseover in Sandcastle.

          // Apply a polyline outline material
          var widePolyline = polylines.add({
            positions: QuarkGIS.PolylinePipeline.generateCartesianArc({
              positions: QuarkGIS.Cartesian3.fromDegreesArray([
                -105.0,
                40.0,
                -100.0,
                38.0,
                -105.0,
                35.0,
                -100.0,
                32.0,
              ]),
            }),
            material: QuarkGIS.Material.fromType(
              QuarkGIS.Material.PolylineOutlineType,
              {
                outlineWidth: 5.0,
              }
            ),
            width: 10.0,
          });
          Sandcastle.declare(widePolyline); // For highlighting on mouseover in Sandcastle.

          // Apply a polyline glow material
          var coloredPolyline = polylines.add({
            positions: QuarkGIS.PolylinePipeline.generateCartesianArc({
              positions: QuarkGIS.Cartesian3.fromDegreesArray([
                -95.0,
                30.0,
                -85.0,
                40.0,
              ]),
            }),
            material: QuarkGIS.Material.fromType(
              QuarkGIS.Material.PolylineGlowType,
              {
                glowPower: 0.2,
                taperPower: 0.2,
                color: new QuarkGIS.Color(1.0, 0.5, 0.0, 1.0),
              }
            ),
            width: 10.0,
          });
          Sandcastle.declare(coloredPolyline); // For highlighting on mouseover in Sandcastle.

          // A polyline loop
          var loopPolyline = polylines.add({
            positions: QuarkGIS.PolylinePipeline.generateCartesianArc({
              positions: QuarkGIS.Cartesian3.fromDegreesArray([
                -105.0,
                30.0,
                -105.0,
                25.0,
                -100.0,
                22.0,
                -100.0,
                28.0,
              ]),
            }),
            width: 3.0,
            loop: true,
          });
          Sandcastle.declare(loopPolyline); // For highlighting on mouseover in Sandcastle.

          // Draw a line in a local reference frame
          // The arrow points to the east, i.e. along the local x-axis.
          var localPolylines = scene.primitives.add(
            new QuarkGIS.PolylineCollection()
          );
          var center = QuarkGIS.Cartesian3.fromDegrees(-80.0, 35.0);
          localPolylines.modelMatrix = QuarkGIS.Transforms.eastNorthUpToFixedFrame(
            center
          );

          var localPolyline = localPolylines.add({
            positions: [
              new QuarkGIS.Cartesian3(0.0, 0.0, 0.0),
              new QuarkGIS.Cartesian3(1000000.0, 0.0, 0.0),
            ],
            width: 10.0,
            material: QuarkGIS.Material.fromType(
              QuarkGIS.Material.PolylineArrowType
            ),
          });
          Sandcastle.declare(localPolyline); // For highlighting on mouseover in Sandcastle.

          //Polyline using the fade material
          var fadingPolyline = polylines.add({
            positions: QuarkGIS.PolylinePipeline.generateCartesianArc({
              positions: QuarkGIS.Cartesian3.fromDegreesArrayHeights([
                -75,
                43,
                500000,
                -125,
                43,
                500000,
              ]),
            }),
            width: 5,
            material: QuarkGIS.Material.fromType(QuarkGIS.Material.FadeType, {
              repeat: false,
              fadeInColor: QuarkGIS.Color.CYAN,
              fadeOutColor: QuarkGIS.Color.CYAN.withAlpha(0),
              time: new QuarkGIS.Cartesian2(0.0, 0.0),
              fadeDirection: {
                x: true,
                y: false,
              },
            }),
          });
          Sandcastle.declare(fadingPolyline); // For highlighting on mouseover in Sandcastle.

          // A rhumb line with two points.
          var rhumbLine = polylines.add({
            positions: QuarkGIS.PolylinePipeline.generateCartesianRhumbArc({
              positions: QuarkGIS.Cartesian3.fromDegreesArray([
                -130.0,
                30.0,
                -75.0,
                30.0,
              ]),
            }),
            width: 5,
            material: QuarkGIS.Material.fromType("Color", {
              color: new QuarkGIS.Color(0.0, 1.0, 0.0, 1.0),
            }),
          });
          Sandcastle.declare(rhumbLine); // For highlighting on mouseover in Sandcastle.
        }

        var viewer = new QuarkGIS.Viewer("quarkgisContainer");
        viewer.screenSpaceEventHandler.setInputAction(function (movement) {
          var pickedPrimitive = viewer.scene.pick(movement.endPosition);
          Sandcastle.highlight(pickedPrimitive);
        }, QuarkGIS.ScreenSpaceEventType.MOUSE_MOVE);

        createPrimitives(viewer.scene);
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof QuarkGIS !== "undefined") {
        window.startupCalled = true;
        startup(QuarkGIS);
      }
    </script>
  </body>
</html>
